<!--
 * @Author: 菜品转台组件
 * @Date: 2025-09-07 10:13:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-09-07 17:52:17
 * @Description: 
-->

<template>
  <CustomDialog v-model:visible="dialogVisible" top="3vh" curent-class="food-transfer-dialog">
    <div class="dialog-content">
      <div class="left-box">
        <div class="title">菜品转台</div>
        <div class="room-content-box" v-loading="loading">
          <div class="room-scroll-list">
            <template v-if="foodList.length">
              <div
                class="scroll-list-item"
                v-for="item in foodList"
                :key="item.id"
                @click="handleSelectFood(item)"
              >
                <img class="image" :src="item.image_url" alt="" />
                <div class="desc-box" v-if="item.skuInfo && item.skuInfo.foodInfo">
                  <div class="name">{{ item.skuInfo.foodInfo.name }}</div>
                  <div class="count" v-if="currentDesktopDiscountInfo.is_vip_price === 1">
                    ￥{{ item.skuInfo.member_price }}/{{ item.skuInfo.unit }}
                  </div>
                  <div class="count" v-else>￥{{ item.skuInfo.price }}/{{ item.skuInfo.unit }}</div>
                  <div class="number">可转数量：{{ item.num }}</div>
                </div>
              </div>
            </template>
            <!-- 暂无数据的组件 -->
            <div class="no-data-box" v-else>
              <NotData desc="暂无菜品数据" />
            </div>
          </div>
        </div>
        <div class="count-choose-box">
          <div class="total" v-if="foodList.length">共{{ foodList.length }}份</div>
        </div>
        <div class="choose-all-btn" @click.stop="selectAllGood">
          <div class="btn-item">选择全部</div>
        </div>
      </div>
      <div class="right-box">
        <!-- 已选中的菜品 -->
        <div class="room-selected-box">
          <div class="room-selected-scroll-list">
            <template v-if="selectActiveFoodList.length">
              <div
                class="scroll-selected-list-item-box"
                v-for="item in selectActiveFoodList"
                :key="item.id"
              >
                <div class="scroll-selected-list-item">
                  <div class="image-desc-box">
                    <img class="image" :src="item.image_url" alt="" />
                    <div class="desc-box" v-if="item.skuInfo && item.skuInfo.foodInfo">
                      <div class="name">{{ item.skuInfo.foodInfo.name }}</div>
                      <div class="vip-money" v-if="currentDesktopDiscountInfo.is_vip_price === 1">
                        ￥{{ item.skuInfo.member_price }}/{{ item.skuInfo.unit }}
                      </div>
                      <div class="count" v-else>
                        ￥{{ item.skuInfo.price }}/{{ item.skuInfo.unit }}
                      </div>
                      <div class="number">可转数量：{{ item.num }}</div>
                    </div>
                  </div>
                  <div class="element-input-box">
                    <el-input-number
                      class="element-input-inner"
                      v-model="item.foodNumber"
                      step-strictly
                      :min="0"
                      :max="item.num"
                      @change="handleFoodNumberChange"
                    ></el-input-number>
                  </div>
                </div>
              </div>
            </template>
            <!-- 暂无数据的组件 -->
            <div class="no-data-box" v-if="selectActiveFoodList.length === 0">
              <NotData desc="请在左侧点击菜品进行转台" />
            </div>
          </div>
        </div>
        <div class="count-selected-box">
          <div class="total">
            <span v-if="selectActiveFoodList.length">已选{{ selectActiveFoodList.length }}份</span>
          </div>
        </div>
        <div class="button-box" v-if="selectActiveFoodList.length">
          <div class="clear-btn" @click.stop="resetFormData">清空</div>
          <div class="confirm-btn" @click.stop="onConfirm">转台</div>
        </div>
      </div>
    </div>
  </CustomDialog>

  <!-- 选择桌台弹框 -->
  <CustomDialog
    v-model:visible="showSelectDesktopDialog"
    top="8vh"
    curent-class="food-transfer-dialog"
  >
    <SelectDesktop :visible="showSelectDesktopDialog" @select="handleSelectDesktop" />
    <div class="dialog-buttons">
      <el-button class="cancel-btn" @click="showSelectDesktopDialog = false">取消</el-button>
      <el-button
        class="confirm-btn"
        type="primary"
        @click="handleConfirmTransfer"
        :disabled="!selectedTargetDeskId || transferLoading"
        :loading="transferLoading"
      >
        确定
      </el-button>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import NotData from '@/components/NotData/Index.vue'
import SelectDesktop from '@/components/common/SelectDesktop/Index.vue'
import { orderFoodOperableFoodList, orderFoodBatchBack } from '@/api/desktop'

interface Props {
  modelValue: boolean
  deskDetail: any
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
  (e: 'refreshData'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 可转台的菜品列表
const foodList = ref<any[]>([])
// 选中的菜品集合
const selectActiveFoodList = ref<any[]>([])
// 当前桌台优惠信息数据
const currentDesktopDiscountInfo = ref<any>({
  is_vip_price: 0
})
// 加载状态
const loading = ref<boolean>(false)
// 是否显示选择桌台弹框
const showSelectDesktopDialog = ref<boolean>(false)
// 转台提交数据
const transferData = ref<any>({})
// 选中的目标桌台ID
const selectedTargetDeskId = ref<any>(null)
// 转台操作loading状态
const transferLoading = ref<boolean>(false)

// 使用computed来处理v-model
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

// 监听弹框显示状态，重置数据
watch(
  () => props.modelValue,
  newVal => {
    if (newVal) {
      // 获取可以进行转台的菜品列表
      getOrderFoodOperableFoodList()
      // 重置数据
      resetFormData()
    }
  }
)

// 获取可以进行转台的菜品列表
const getOrderFoodOperableFoodList = async () => {
  loading.value = true
  try {
    const params = {
      record_id: props.deskDetail.id
    }
    const res = await orderFoodOperableFoodList(params)
    if (res.status === 200) {
      foodList.value = res.data.list
    }
  } catch (error) {
    console.error('获取可转台菜品列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 选中对应的菜品
const handleSelectFood = (datas: any) => {
  // 深拷贝处理
  const item = JSON.parse(JSON.stringify(datas))
  // 进行转台菜品数量的加减操作专用
  item.foodNumber = 1
  const activeIndex = selectActiveFoodList.value.findIndex((itm: any) => itm.id === item.id)
  if (activeIndex === -1) {
    selectActiveFoodList.value.unshift(item)
  }
}

// 重置数据
const resetFormData = () => {
  selectActiveFoodList.value = []
  selectedTargetDeskId.value = null
  transferLoading.value = false
}

// 切换当前菜品的转台菜品数量
const handleFoodNumberChange = (num: number) => {
  if (num === 0) {
    selectActiveFoodList.value = selectActiveFoodList.value.filter(
      (item: any) => item.foodNumber !== 0
    )
  }
}

// 选择全部菜品
const selectAllGood = () => {
  // 进行转台菜品数量的加减操作专用
  foodList.value.forEach((item: any) => {
    item.foodNumber = 1
  })
  selectActiveFoodList.value = foodList.value
}

// 确认提交事件
const onConfirm = () => {
  if (selectActiveFoodList.value.length === 0) {
    ElMessage.warning('请选择要转台的菜品')
    return
  }

  // 组装转台数据
  const backList = selectActiveFoodList.value.map((item: any) => ({
    id: item.id, // 订单菜品id
    num: item.foodNumber // 转台数量
  }))

  transferData.value = {
    record_id: props.deskDetail.id,
    back_list: backList
  }

  // 打开选择桌台弹框
  showSelectDesktopDialog.value = true
}

// 选择桌台
const handleSelectDesktop = (deskId: any) => {
  selectedTargetDeskId.value = deskId
}

// 确认转台
const handleConfirmTransfer = async () => {
  if (!selectedTargetDeskId.value) {
    ElMessage.warning('请先选择目标桌台')
    return
  }

  transferLoading.value = true
  try {
    const params = {
      ...transferData.value,
      reason: '',
      move_desk: selectedTargetDeskId.value // 目标桌台id
    }

    const res = await orderFoodBatchBack(params)
    if (res.status === 200) {
      ElMessage.success('转台成功')
      showSelectDesktopDialog.value = false
      dialogVisible.value = false
      emit('success')
      emit('refreshDesk')
    } else {
      ElMessage.error(res.data?.message || '转台失败')
    }
  } catch (error) {
    console.error('转台失败:', error)
    ElMessage.error('转台失败')
  } finally {
    transferLoading.value = false
  }
}
</script>

<style scoped lang="scss">
.dialog-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  .left-box {
    max-width: 664px;
    box-sizing: border-box;

    .title {
      font-size: 20px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      color: #333333;
      padding-left: 10px;
    }

    .room-content-box {
      padding: 4px 28px 20px 28px;
      box-sizing: border-box;
      height: 560px;
      overflow-y: auto;
      background: #f4f4f4;
      margin-top: 20px;
      width: 646px;
      padding-left: 10px;

      .room-scroll-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        .scroll-list-item {
          width: 283px;
          height: 123px;
          background: #ffffff;
          border-radius: 12px;
          box-sizing: border-box;
          margin-top: 20px;
          cursor: pointer;
          display: flex;
          align-items: center;

          .image {
            flex-shrink: 0;
            width: 163px;
            height: 123px;
            border-radius: 12px 0 0 12px;
          }
        }
      }

      .room-scroll-list::after {
        content: '';
        width: 208px;
      }
    }

    //滚动条整体的大小
    .room-content-box::-webkit-scrollbar {
      width: 6px !important;
      height: 0 !important;
    }

    //滚动条里滑动的滑块
    .room-content-box::-webkit-scrollbar-thumb {
      height: 200px !important;
      background: #d2d2d2 !important;
      border-radius: 3px !important;
    }

    //滚动条底层样式
    .room-content-box::-webkit-scrollbar-track {
      display: none !important;
    }

    .count-choose-box {
      width: 646px;
      height: 60px;
      padding-left: 20px;
      box-sizing: border-box;
      background: #f4f4f4;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }

    .choose-all-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 52px;
      margin-top: 20px;
      padding-right: 10px;

      .btn-item {
        width: 156px;
        height: 52px;
        line-height: 52px;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 12px;
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #333333;
        cursor: pointer;
      }
    }
  }

  .right-box {
    width: 516px;
    box-sizing: border-box;
    margin-left: 70px;
    height: 744px;
    border: 1px solid #d2d2d2;
    border-radius: 12px;

    .room-selected-box {
      border-radius: 12px 12px 0 0;
      box-sizing: border-box;
      height: 592px;
      overflow-y: auto;

      .room-selected-scroll-list {
        padding-top: 10px;

        .scroll-selected-list-item-box {
          padding: 20px 30px;
          border-bottom: 1px solid #e2e2e2;

          .scroll-selected-list-item {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            .image-desc-box {
              display: flex;
              align-items: center;

              .image {
                flex-shrink: 0;
                width: 173px;
                height: 130px;
                margin-right: 12px;
                border-radius: 12px;
              }

              .desc-box {
                .name {
                  font-size: 18px;
                  font-family:
                    PingFang SC,
                    PingFang SC-Bold;
                  font-weight: 700;
                  color: #333333;
                }
              }
            }

            .element-input-box {
              .element-input-inner {
                width: 134px;
              }
            }
          }
        }

        .scroll-selected-list-item-box:last-child {
          border-bottom: none;
        }
      }
    }

    //滚动条整体的大小
    .room-selected-box::-webkit-scrollbar {
      width: 6px !important;
      height: 0 !important;
    }

    //滚动条里滑动的滑块
    .room-selected-box::-webkit-scrollbar-thumb {
      height: 200px !important;
      background: #d2d2d2 !important;
      border-radius: 3px !important;
    }

    //滚动条底层样式
    .room-selected-box::-webkit-scrollbar-track {
      display: none !important;
    }

    .count-selected-box {
      height: 60px;
      padding-left: 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }

    .button-box {
      box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 30px;

      .clear-btn {
        width: 100px;
        height: 52px;
        line-height: 52px;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 12px;
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #333333;
        cursor: pointer;
      }

      .confirm-btn {
        width: 336px;
        height: 52px;
        background: #7c0a03;
        border-radius: 12px;
        line-height: 52px;
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}

.desc-box {
  padding-top: 12px;
  margin-left: 8px;

  .name {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #30314a;
  }

  .count {
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    color: #333333;
    margin-top: 12px;
  }

  .number {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    color: #333333;
    margin-top: 30px;
  }

  .vip-money {
    font-size: 12px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    color: #efc291;
    margin-top: 10px;
  }

  .number {
    margin-top: 30px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    color: #333333;
  }
}

.no-data-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  margin-top: 200px;
  width: 100%;
}

.dialog-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  padding: 0 20px;

  .cancel-btn {
    width: 190px;
    height: 60px;
    background: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-family:
      PingFang SC,
      PingFang SC-Regular !important;
    font-weight: 400 !important;
    color: #333333 !important;

    &:hover {
      background: #f5f5f5 !important;
      border-color: #333333 !important;
      color: #333333 !important;
    }
  }

  .confirm-btn {
    width: 190px;
    height: 60px;
    background: #7c0a03 !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-family:
      PingFang SC,
      PingFang SC-Regular !important;
    font-weight: 400 !important;
    color: #ffffff !important;

    &:hover:not(:disabled) {
      background: #8a0b04 !important;
      color: #ffffff !important;
    }

    &:disabled {
      background: #cccccc !important;
      color: #999999 !important;
      cursor: not-allowed !important;
    }
  }
}
</style>
<style lang="scss">
.food-transfer-dialog {
  max-height: unset !important;
}
</style>
